<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <title>Document</title>
 <script src='../public/js/vue.js'></script>
</head>
<body>
  <div id='app'>
    <!-- <div>
      <label>{{type}}</label>
      <input type="text" :placeholder="msg">
      <button @click="cutLogin()">切换登录方式</button>
    </div> -->
    <div>
      <span v-if="isShow">
        <label form="username">账号</label>
        <input type="text" id="username" placeholder="请输入账号">
      </span>
      <span v-else>
        <label form="email">邮箱</label>
        <input type="text" id="email" placeholder="请输入邮箱">
      </span>
      <button @click="isShow = !isShow">切换登录方式</button>
    </div>
  </div>
  <script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        mode:1,
        type:'账号',
        msg:'请输入账号',
        isShow:true
      }
    },
    methods:{
      cutLogin() {
        if(this.mode == 0) {
          this.type = '账号'
          this.msg = '请输入账号'
        } else {
          this.type = '邮箱'
          this.msg = '请输入邮箱'
        }
        this.mode = !this.mode
      },
    },
    computed:{
      
    }
  })
  </script>
</body>
</html>